<template>
    <div class="grid-card">
        <div class="grid-card-header">{{title}}</div>
        <div class="grid-card-body default-table" v-if="name == 'default'">
            <el-table
                    :data="tableDataDefault"
                    border
                    header-align="center"
                    align="center"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="statistical_item"
                        label="统计项">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="today_data"
                        label="今日数据">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="total_data"
                        label="累计数据">
                </el-table-column>
            </el-table>
        </div>
        <div class="grid-card-body dispatch_table" v-if="name == 'dispatch'">
            <el-table
                    :data="tableDataDispatch"
                    border
                    header-align="center"
                    align="center"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="distribution_area"
                        label="配送区域">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="site"
                        label="站点">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="company"
                        label="连队">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="sign_in_driver"
                        label="签到司机">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="total_order"
                        label="今日订单">
                </el-table-column>
            </el-table>
        </div>
        <div class="grid-card-body" v-if="name == 'shop'">
            <el-table
                    :data="tableDataShop"
                    border
                    header-align="center"
                    align="center"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="date"
                        label=""
                        width="60"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="accumulative_user"
                        label="累计用户">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="add_user"
                        label="新增用户">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="single_merchant"
                        label="下单商户">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="lower_singular"
                        label="下单数">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="consumption_amount"
                        label="消费金额">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import base from './base.js';
    export default {
        extends: base,
        name: "GridOne",
        props: {},
        data() {
            return {
                tableDataDefault: [
                    {
                        statistical_item: '订单',
                        today_data: '',
                        total_data: ''
                    }, {
                        statistical_item: '用户',
                        today_data: '100000000',
                        total_data: '100000000'
                    }, {
                        statistical_item: '在职司机',
                        today_data: '100000000',
                        total_data: '100000000'
                    }, {
                        statistical_item: '服务城市',
                        today_data: '100000000',
                        total_data: '100000000'
                    }],
                tableDataDispatch: [
                     {
                         distribution_area: '6',
                         site: '6',
                         company: '6',
                         sign_in_driver: '6',
                         total_order: '6'
                    }],
                tableDataShop: [
                    {
                        date: '今天',
                        accumulative_user: '66666666',
                        add_user: '666666',
                        single_merchant: '666666',
                        lower_singular: '666666',
                        consumption_amount: '666666.00'
                    },{
                        date: '本周',
                        accumulative_user: '66666',
                        add_user: '666666',
                        single_merchant: '666666',
                        lower_singular: '666666',
                        consumption_amount: '666666.00'
                    },{
                        date: '本月',
                        accumulative_user: '66666',
                        add_user: '666666',
                        single_merchant: '666666',
                        lower_singular: '666666',
                        consumption_amount: '666666.00'
                    }]
            }
        }
    }
</script>
<style>
    /*.default-table .el-table td, .el-table th{*/
        /*padding: 10px 0 !important;*/
    /*}*/
    /*.dispatch_table .el-table td, .el-table th{*/
        /*padding: 4px 0 !important;*/
    /*}*/
</style>
<style scoped lang="less">
    .grid-card {
        width: 100%;
        min-width: 300px;
        .grid-card-header {
            height: 43px;
            line-height: 43px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            font-size: 16px;
            color: #000;
            border-radius: 2px 2px 0 0;
        }
        .grid-card-body{
            position: relative;
            padding: 10px 15px;
            line-height: 24px;

        }
    }
</style>
